<template>
  <van-nav-bar fixed
               :title="currentRouteName"
               left-arrow
               @click-left="onClickLeft"
               @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="search" size="18"/>
    </template>
  </van-nav-bar>
  <div id="content" style="margin: 0px 0px">
    <router-view/>
  </div>
  <van-tabbar route>
    <van-tabbar-item icon="home-o" to="/" name="index">主页</van-tabbar-item>
    <van-tabbar-item icon="search" to="/team" name="team">队伍</van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="/self" name="self">我</van-tabbar-item>
  </van-tabbar>

</template>
<script setup>


import {useRoute, useRouter} from "vue-router";
import {ref, watch} from "vue";

const route = useRoute()
const router = useRouter()
const currentRouteName = ref(route.name);

watch(route, (newRoute) => {
  currentRouteName.value = newRoute.name;
});
const onClickLeft = () => history.back();
const onClickRight = () => router.push({path: '/search'})

</script>
<style scoped>

</style>